<!--
 * @页面名称:动态窗体模型
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card formcard">
    <div class="top-search">
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item class="left">
          <el-tree-select
            style="width: 100%"
            check-strictly
            v-model="formData.Fonds_ID"
            @change="getClassData"
            node-key="Fonds_ID"
            :props="{ label: 'Fonds_Name', children: 'children' }"
            :data="FatherData"
            :render-after-expand="false"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.FM_ID" placeholder="请选择归档方式" @change="getTableData">
            <el-option v-for="item in classData" :key="item.FM_ID" :label="item.FM_OCName" :value="item.FM_ID" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-space>
        <!-- <el-button type="primary" @click="add" :disabled="BtnStatus[0]">新增</el-button>
            <el-button @click="edit" :disabled="BtnStatus[1]">修改</el-button>
            <el-button type="danger" @click="del" :disabled="BtnStatus[2]">删除</el-button> -->
        <el-tooltip class="box-item" placement="bottom-end">
          <template #content>
            <span>新增</span>
          </template>
          <el-button :disabled="BtnStatus[0]" icon="FolderAdd" @click="add"></el-button>
        </el-tooltip>
        <el-tooltip class="box-item" placement="bottom-end">
          <template #content>
            <span>修改</span>
          </template>
          <el-button :disabled="BtnStatus[1]" icon="Edit" @click="edit"></el-button>
        </el-tooltip>
        <el-tooltip class="box-item" placement="bottom-end">
          <template #content>
            <span>删除</span>
          </template>
          <el-button :disabled="BtnStatus[2]" icon="Delete" @click="del"></el-button>
        </el-tooltip>
      </el-space>
    </div>
    <div style="height: calc(100% - 50px)">
      <stable :columns="tableSetting.columns" :data="tableSetting.data" @rowClick="rowClick"></stable>
    </div>

    <el-drawer v-model="isDrawerShow" :with-header="false" size="80%">
      <div style="height: calc(100% - 62px)">
        <el-tabs v-model="active" type="card" @tab-change="tabChange">
          <el-tab-pane label="界面显示字段"></el-tab-pane>
          <el-tab-pane label="字段规则"></el-tab-pane>
          <el-tab-pane label="界面输入窗体"></el-tab-pane>
          <el-tab-pane label="触发器"></el-tab-pane>
          <el-tab-pane label="验证规则"></el-tab-pane>
          <el-tab-pane label="门类报表"></el-tab-pane>
        </el-tabs>
        <tab1 v-if="active === '0'" ref="FMtab1"></tab1>
        <tab2 v-if="active === '1'" ref="FMtab2"></tab2>
        <tab3 v-if="active === '2'" ref="FMtab3"></tab3>
        <tab4 v-if="active === '3'" ref="FMtab4"></tab4>
        <tab5 v-if="active === '4'" ref="FMtab5"></tab5>
        <tab6 v-if="active === '5'" ref="FMtab6" :tableList="tableSetting.data"></tab6>
      </div>
    </el-drawer>
    <!-- 新增修改弹出框 -->
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData2" :rules="rules" ref="formRef">
        <el-form-item label="类型:" prop="type">
          <el-input v-model="formData2.type"></el-input>
        </el-form-item>
        <el-form-item label="名称:" prop="Name">
          <el-input v-model="formData2.Name"></el-input>
        </el-form-item>
        <el-form-item label="数据表:" prop="dataSheet">
          <el-select v-model="formData2.dataSheet">
            <el-option v-for="(item, index) in tableList" :key="index" :label="item.Description" :value="item.Name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父级表:" prop="Parent">
          <el-select v-model="formData2.Parent">
            <el-option
              v-for="(item, index) in tableSetting.data"
              :key="index"
              :label="item.FMT_Name"
              :value="item.FMT_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="有小分类:" prop="SmallCatalog">
              <el-checkbox v-model="formData2.SmallCatalog"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否启用:" prop="Enable">
              <el-checkbox v-model="formData2.Enable"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="显示元数据:" prop="FMT_ShowMetaData">
              <el-checkbox v-model="formData2.FMT_ShowMetaData"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注:" prop="Remark">
          <el-input :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" v-model="formData2.Remark"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="闭合图片:" prop="fmT_Icon1">
              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="onChange">
                <img v-if="formData2.fmT_Icon1" :src="formData2.fmT_Icon1" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="展开图片:" prop="fmT_Icon2">
              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="onChange2">
                <img v-if="formData2.fmT_Icon2" :src="formData2.fmT_Icon2" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted, nextTick, h } from "vue";
import { tab1, tab2, tab3, tab4, tab5, tab6 } from "./components";
import type { FormInstance, FormRules } from "element-plus";
import { transTree, fileToBase64 } from "@/utils/util";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import useCurrentInstance from "@/utils/useCurrentInstance";
const { proxy } = useCurrentInstance();
// 按钮状态
const BtnStatus = ref([true, true, true]);
// 表单绑定字段
const formData = reactive({
  Fonds_ID: "",
  FM_ID: ""
});
// 表格配置参数
const tableSetting = reactive({
  columns: [
    { field: "FMT_Type", title: "类型", sortable: true },
    { field: "FMT_Name", title: "名称", sortable: true },
    { field: "FMT_TableName", title: "对应的数据表", sortable: true },
    { field: "FMT_Remark", title: "备注", sortable: true },
    {
      title: "操作",
      width: 100,
      align: "center",
      slots: {
        default: ({ row }: any) => {
          return (
            <el-button type="primary" link onClick={() => showDetails(row)}>
              查看
            </el-button>
          );
        }
      }
    }
  ],
  data: [] as any[]
});
// 全宗数据
const FondsData = ref();
// 树结构全宗
const FatherData = ref<any[]>([]);
// 归档数据
const classData = ref();
// 表单规则
const rules = reactive<FormRules>({
  Name: [{ required: true, message: "请输入名称!", trigger: "blur" }]
});
// 表单绑定字段
const formData2 = reactive({
  type: "",
  Name: "",
  dataSheet: "",
  Parent: "",
  Remark: "",
  SmallCatalog: false,
  Enable: true,
  fmT_Icon1: "",
  fmT_Icon2: "",
  FMT_ShowMetaData: false
});
//获取表单实例
const formRef = ref<FormInstance>();
// 数据表数据
const tableList = ref<any>([]);
// 弹出框配置
const dialogSetting = reactive({
  visible: false,
  title: ""
});
// tab页绑定字段
const active = ref("0");
// 右侧抽屉状态
const isDrawerShow = ref<boolean>(false);
// 单击表格保存对象
const clickObj = ref();
// tab栏实例
const FMtab1 = ref();
const FMtab2 = ref();
const FMtab3 = ref();
const FMtab4 = ref();
const FMtab5 = ref();
const FMtab6 = ref();
// 图片前缀
const imgStr = ref("data:image/jpeg;base64,");
// 获取全宗数据
const getFondsData = () => {
  proxy.$vueAxios.get("Master_Base_Fonds/Get", { order: "Fonds_Order asc" }).then((res: any) => {
    FondsData.value = res.List;
    FatherData.value = transTree(FondsData.value, "Fonds_ID", "Fonds_Father");
  });
};
// 获取归档数据
const getClassData = () => {
  proxy.$vueAxios
    .post(
      "Master_Base_Fonds_Class/GetConditional",
      {
        order: "FC_ID asc",
        dtoList: [
          {
            fieldName: "Fonds_ID",
            fieldValue: formData.Fonds_ID,
            conditionalType: 0
          }
        ]
      },
      { noLoading: true }
    )
    .then((res: any) => {
      const fcIds = res.List.map((item: any) => item.FC_ID);
      const result = fcIds.join(",");
      proxy.$vueAxios
        .post(
          "Master_Base_FormModel/GetConditional",
          {
            order: "FM_Index asc",
            dtoList: [
              {
                fieldName: "FC_ID",
                fieldValue: result,
                conditionalType: 6
              }
            ]
          },
          { noLoading: true }
        )
        .then((res2: any) => {
          classData.value = res2.List;
        });
    });
};
// 获取数据
const getTableData = () => {
  proxy.$vueAxios
    .post("Master_Base_FormModel_Table/GetConditional", {
      order: "FMT_Type ASC",
      dtoList: [
        {
          fieldName: "FM_ID",
          fieldValue: formData.FM_ID
        }
      ]
    })
    .then((res: any) => {
      tableSetting.data = res.List;
      BtnStatus.value[0] = false;
      getList();
    });
};
// 表格单击
const rowClick = ({ row }: any) => {
  clickObj.value = row;
  BtnStatus.value[1] = false;
  BtnStatus.value[2] = false;
  // getChildrenTable();
};
// 查看角色详情
const showDetails = (row: any) => {
  clickObj.value = row;
  BtnStatus.value[1] = false;
  BtnStatus.value[2] = false;
  isDrawerShow.value = true;
  getChildrenTable();
};
// 获取数据表
const getList = () => {
  proxy.$vueAxios.get("Table/get", { noLoading: true }).then((res: any) => {
    tableList.value = res.List;
  });
};
// 主表格新增
const add = () => {
  formRef.value?.resetFields();
  dialogSetting.visible = true;
  dialogSetting.title = "新增";
};
// 主表格修改
const edit = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "修改";
  nextTick(() => {
    formData2.Enable = clickObj.value.FMT_Enable;
    formData2.Name = clickObj.value.FMT_Name;
    formData2.Parent = clickObj.value.FMT_Parent_ID;
    formData2.Remark = clickObj.value.FMT_Remark;
    formData2.SmallCatalog = clickObj.value.FMT_SmallCatalog_Config;
    formData2.dataSheet = clickObj.value.FMT_TableName;
    formData2.type = clickObj.value.FMT_Type;
    formData2.fmT_Icon1 = imgStr.value + clickObj.value.FMT_Icon1;
    formData2.fmT_Icon2 = imgStr.value + clickObj.value.FMT_Icon2;
    formData2.FMT_ShowMetaData = clickObj.value.FMT_ShowMetaData;
  });
};
// 主表格删除
const del = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_FormModel_Table/Delete", [clickObj.value.FMT_ID]).then((res: any) => {
        if (res.Mark) {
          tableSetting.data = tableSetting.data.filter(
            (v: any) => v !== tableSetting.data.find((v: any) => v.FMT_ID === clickObj.value.FMT_ID)
          );
          proxy.$message.success("删除成功");
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      console.log(err);
      proxy.$message("取消删除");
    });
};
// 弹出框确认事件
const handle = () => {
  formRef.value!.validate((isValid: boolean) => {
    if (isValid) {
      if (dialogSetting.title === "新增") {
        proxy.$vueAxios
          .post("Master_Base_FormModel_Table", {
            fmT_ID: proxy.$global.createID(),
            fM_ID: formData.FM_ID,
            fonds_ID: formData.Fonds_ID,
            fmT_TableName: formData2.dataSheet,
            fmT_Type: formData2.type,
            fmT_Name: formData2.Name,
            fmT_Enable: formData2.Enable,
            fmT_Enable_SmallCatalog: formData2.SmallCatalog,
            fmT_Remark: formData2.Remark,
            fmT_Parent_ID: formData2.Parent,
            fmT_Icon1: formData2.fmT_Icon1.split(",")[1],
            fmT_Icon2: formData2.fmT_Icon2.split(",")[1],
            fmT_ShowMetaData: formData2.FMT_ShowMetaData
          })
          .then(() => {
            dialogSetting.visible = false;
            getTableData();
          });
      } else {
        proxy.$vueAxios
          .put("Master_Base_FormModel_Table", {
            fmT_ID: clickObj.value.FMT_ID,
            fM_ID: clickObj.value.FM_ID,
            fonds_ID: clickObj.value.Fonds_ID,
            fmT_TableName: formData2.dataSheet,
            fmT_Type: formData2.type,
            fmT_Name: formData2.Name,
            fmT_Enable: formData2.Enable,
            fmT_Enable_SmallCatalog: formData2.SmallCatalog,
            fmT_Remark: formData2.Remark,
            fmT_Parent_ID: formData2.Parent,
            fmT_Icon1: formData2.fmT_Icon1.split(",")[1],
            fmT_Icon2: formData2.fmT_Icon2.split(",")[1],
            fmT_ShowMetaData: formData2.FMT_ShowMetaData
          })
          .then(() => {
            dialogSetting.visible = false;
            getTableData();
          });
      }
    }
  });
};
// tab页切换事件
const tabChange = (val: any) => {
  console.log("触发tab方法", val);
  getChildrenTable();
};
const getChildrenTable = () => {
  nextTick(() => {
    switch (active.value) {
      case "0":
        FMtab1.value && FMtab1.value.getTableData(clickObj.value);
        break;
      case "1":
        FMtab2.value && FMtab2.value.getTableData(clickObj.value);
        break;
      case "2":
        FMtab3.value && FMtab3.value.getTableData(clickObj.value);
        break;
      case "3":
        FMtab4.value && FMtab4.value.getTableData(clickObj.value);
      case "4":
        FMtab5.value && FMtab5.value.getTableData(clickObj.value);
      case "5":
        FMtab6.value && FMtab6.value.getTableData(clickObj.value);
        break;
    }
  });
};
// 文件上传
const onChange = (file: any) => {
  fileToBase64(file.raw, (res: any) => {
    formData2.fmT_Icon1 = res;
  });
};
const onChange2 = (file: any) => {
  fileToBase64(file.raw, (res: any) => {
    formData2.fmT_Icon2 = res;
  });
};
onMounted(() => {
  getFondsData();
});
</script>

<style scoped lang="scss">
@import "./index.scss";
.top-search {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  .el-form {
    display: flex;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .left {
    margin-right: 10px;
  }
}
.footer-table {
  position: relative;
  margin-top: 12px;
  .tab-options {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
